<template>
  <div class="app-container">
    <div style="width:100%; text-align: right;">
      <el-button size="small" icon="el-icon-download" @click="exportData">导出</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="add" style="margin-left: 16px;">新增</el-button>
    </div>
    <div style="width: 100%; margin-top: 8px;">
      <el-form :model="searchForm" label-width="80px">
        <div style="display: flex;">
          <el-form-item label="安装位置">
            <el-input v-model="searchForm.installPlace" size="small" placeholder="请输入安装位置" style="width: 160px;"></el-input>
          </el-form-item>
          <el-form-item label="设备类型" style="margin-left: 10px;">
            <el-select v-model="searchForm.devType" placeholder="请选择">
              <el-option
                  v-for="item in devTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-button-group style="margin-left: 16px;">
            <el-button type="primary" plain icon="el-icon-search" @click="search">搜索</el-button>
            <el-button @click="refresh">重置</el-button>
          </el-button-group>
        </div>
      </el-form>
    </div>

    <el-divider />

    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" stripe>
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column label="设备类型" prop="devType" >
        <template slot-scope="scope">
          <template v-if="scope.row.devType===1">访客卡无感监测设备</template>
          <template v-else-if="scope.row.devType===2">访客卡核验设备</template>
          <template v-else-if="scope.row.devType===3">访客核验及收发卡设备</template>
          <template v-else-if="scope.row.devType===4">手持核验终端</template>
          <template v-else>未知</template>
        </template>
      </el-table-column>
      <el-table-column label="安装位置" prop="installPlace" />
      <el-table-column label="设备序列号" prop="devSn" />
      <el-table-column label="IP地址" prop="ipAddress" />
      <el-table-column label="连接状态" prop="connectStatus" >
        <template slot-scope="scope">
          <template v-if="scope.row.connectStatus===0">离线</template>
          <template v-else-if="scope.row.connectStatus===1">在线</template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <span>
            <el-button circle type="success" icon="el-icon-more" size="mini" @click="openDetailDialog(scope.row.id)" title="详情"></el-button>
            <el-button circle type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row.id)" title="修改"></el-button>
            <el-button circle type="danger" icon="el-icon-delete" size="mini" @click="del(scope.row.id)" title="删除"></el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="searchForm.pageNum" :limit.sync="searchForm.pageSize"
                @pagination="fetchData" />

    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'modify' ? '修改' : '新增'">
      <el-form ref="dataForm" :model="formData" label-width="120px" label-position="right" v-if="formData" :rules="rules">
        <el-row :gutter="20">
          <template v-if="formData.id">
            <el-col :span="12">
              <el-form-item label="ID">
                <span>{{formData.id}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="创建时间">
                <span>{{formData.createTime}}</span>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="24">
            <el-form-item label="设备类型" prop="devType">
              <el-select v-model="formData.devType" placeholder="请选择" style="width: 100%;">
                <el-option
                    v-for="item in devTypeOptions"
                    v-if="item.value"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="formData.devType === 2 || formData.devType === 3 || formData.devType === 4">
            <el-col :span="24">
              <el-form-item label="序列号" prop="devSn">
                <el-input v-model.trim="formData.devSn" placeholder="请输入序列号" />
              </el-form-item>
            </el-col>
          </template>
          <template v-if="formData.devType === 1">
            <el-col :span="24">
              <el-form-item label="IP地址" prop="ipAddress">
                <el-input v-model.trim="formData.ipAddress" placeholder="请输入IP地址" />
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="24">
            <el-form-item label="安装位置" prop="installPlace">
              <el-input v-model="formData.installPlace" placeholder="请输入安装位置" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input type="textarea" :rows="2" maxlength="500" v-model="formData.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </span>
    </el-dialog>

    <el-dialog :visible.sync="detailDialogVisible" title="详情">
      <el-form ref="detailForm" :model="detailData" label-width="120px" label-position="right" v-if="detailData">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="ID">
              <span>{{detailData.id}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span>{{detailData.createTime}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备类型">
              <span>
                <template v-if="detailData.devType===1">访客卡无感监测设备</template>
                <template v-else-if="detailData.devType===2">访客卡核验设备</template>
                <template v-else-if="detailData.devType===3">访客核验及收发卡设备</template>
                <template v-else-if="detailData.devType===4">手持核验终端</template>
                <template v-else>未知</template>
              </span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="IP地址">
              <span>{{detailData.ipAddress}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序列号">
              <span>{{detailData.devSn}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装位置">
              <span>{{detailData.installPlace}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="连接状态">
              <span>{{detailData.connectStatus === '0' ? '离线' : '在线'}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <span>{{detailData.remark}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
import {
  deviceDetail,
  deviceAdd,
  deviceDelete,
  deviceEdit,
  deviceList,
  exportList
} from '@/api/device'

export default {
  components: {
    Pagination
  },
  data() {
    var checkEmpty = (rule, value, callback) => {
      if (!value) {
        callback(new Error("必填项不能为空！"));
      } else {
        callback();
      }
    }
    return {
      searchForm: {
        installPlace: '',
        devType: '',
        pageNum: 1,
        pageSize: 10,
      },
      statusOptions: [
        {label: "离线", value: 0},
        {label: "在线", value: 1}
      ],
      devTypeOptions: [
        {label: "全部", value: ''},
        {label: "访客卡无感监测设备", value: 1},
        {label: "访客卡核验设备", value: 2},
        {label: "访客核验及收发卡设备", value: 3},
        {label: "手持核验终端", value: 4}
      ],
      total: 0,
      list: [],
      listLoading: false,
      dialogVisible: false,
      dialogType: 'create',
      loading: false,
      parents: [],
      detailData: null,
      detailDialogVisible: false,
      formData: null,
      rules: {
        devType: [{ required: true, type: 'number', validator: checkEmpty, trigger: 'blur' }],
        installPlace: [{ required: true, validator: checkEmpty, trigger: 'blur' }],
        ipAddress: [{ required: true, validator: checkEmpty, trigger: 'blur' }],
        devSn: [{ required: true, validator: checkEmpty, trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    exportData() {
      let queryParams = {
        installPlace: this.searchForm.installPlace,
        devType: this.searchForm.devType,
      }
      exportList(queryParams).then(response => {
        if(response.code === 200) {
          let filename = response.msg
          let url = '/download/' + filename
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", filename); //指定下载后的文件名，防跳转
          document.body.appendChild(link);
          link.click();
        }
      })
    },
    openDetailDialog(id) {
      deviceDetail(id).then(response => {
        if (response.code === 200 ){
          this.detailData = response.data
          this.detailDialogVisible = true
        } else {
          this.$message.error('获取设备详情失败：' + response.msg)
        }
      })
    },
    search() {
      this.fetchData()
    },
    refresh() {
      this.searchForm = {
        installPlace: '',
        devType: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.fetchData()
    },
    fetchData() {
      this.listLoading = true
      deviceList(this.searchForm).then(response => {
        if(response.code === 200) {
          this.list = response.rows
          this.total = response.total
          this.listLoading = false
        } else {
          this.$message.warning("获取列表失败：" + response.msg)
        }
      })
    },
    add() {
      this.formData = {
        devType: '',
        devSn: '',
        ipAddress: '',
        installPlace: '',
        connectStatus: 0,
        remark: ''
      }
      this.dialogVisible = true
      this.dialogType = 'create'
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    edit(id) {
      deviceDetail(id).then(response => {
        if (response.code === 200 ){
          this.formData = {
            id: response.data.id,
            createTime: response.data.createTime,
            devType: response.data.devType,
            devSn: response.data.devSn,
            ipAddress: response.data.ipAddress,
            installPlace: response.data.installPlace,
            connectStatus: response.data.connectStatus,
            remark: response.data.remark
          }
          this.$nextTick(() => {
            this.dialogVisible = true
            this.dialogType = 'modify'
            this.$refs['dataForm'].clearValidate()
          })
        } else {
          this.$message.error('获取角色详情失败：' + response.msg)
        }
      })
    },
    del(id) {
      this.$confirm('确认删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deviceDelete(id).then(response => {
          if (response.code === 200) {
            this.$message.success('删除成功！')
            this.fetchData()
          } else {
            this.$message.error('删除失败：' + response.msg)
          }
        })
      })
    },
    submit() {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          if (!this.formData.id) {
            // 新增
            deviceAdd(this.formData).then(response => {
              if (response.code === 200) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.fetchData()
                this.dialogVisible = false
              } else {
                this.$message.error("新增失败：" + response.msg)
              }
            })
          } else {
            // 修改
            deviceEdit(this.formData).then(response => {
              if (response.code === 200) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
                this.fetchData()
                this.dialogVisible = false
              } else {
                this.$message.error("新增失败：" + response.msg)
              }
            })
          }
        }
      })
    }
  }
}
</script>
